<template>
  <section class="video-box">
       <div class="clearfloat">
          <nav><span><i class="el-icon-circle-cross" style="font-size: 20px" v-on:click="closeVideoBox"></i></span></nav>
          <video style="background-color: black;" height="500px" width="800px" controls="controls" autoplay="autoplay" preload="auto" :src="url" :poster="loadingUrl"> 
             {{$t('message.yourBrowserDoesNotSupportH5')}}
         </video>
         <p>{{$t('message.playing')}}：{{name}}</p>
     </div>
  </section>
</template>

<script>
import loading from "../assets/images/loading2.gif"
export default {
  data(){
    return{
      loadingUrl: loading
    }
  },
  props:{
     url: {
       type: String,
       required: true
     },
     name:{
       type: String,
       default:''
     }
  },
  methods:{
    closeVideoBox(){
      this.$emit("closeVideoBox");
    }
  }
}
</script>
<style lang="less" scoped>
 .video-box{
   position: fixed;
   z-index:9999;
   top:0;
   bottom:0;
   left:0;
   right:0;
   width:100%;
   height:100%;
   background-color: rgba(0,0,0,0.3);
   >div{
     width:60%;
     background-color:#fff;
     position: absolute;
     top:55%;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     left:0;
     right:0;
     margin:auto;
     padding:0 10px 10px;
     border-radius:5px;
     border-top-right-radius:12px;
     nav{
       float:right;
       width:15px;
       height:15px;
       line-height: 16px;
       top:0;
       position: relative;
       right: -5px;
       text-align: right;
       margin-bottom:5px;
       span{
        cursor: pointer;
       }
     }
     video{
       width:100%;
       background: none;
     }
     p{
       font-size:14px;
       text-align: center;
     }
   }
 }
</style>
